昨天我們創一個專案的時候，跑出下面兩個檔案

• .xml 檔案，就是設計畫面的地方

• .kt 檔案，這裡是用來針對畫面上的東西，製作功能的地方
  • 例如某個按紐按下之後要發生什麼事情
  • 動態改變畫面的地方都在這裡

點開 .xml 檔案

這裡可以看到我們執行 APP 的時候看到的畫面

如果你跟我的畫面有些微不同，不用擔心，後面會慢慢了解這個介面上的一堆東西分別是幹嘛用的

我們點一下中間那個 Hello World 的文字，下方的 3 號框框內應該會跑出一坨東西

• 一號框 -> 可以放到畫面上的所有元件 (可以拖曳到畫面試試看)

  • 如果希望學的快一點，可以把每個名稱都拿去 google 或 youtube，可以很快認識他們 (記得搜尋的時候前面要加上 Android)
  • 可以從 TextView ImageView Button EditText 這四個開始學

• 二號框 -> 目前畫面上所有的元件，以及彼此的關係

  • 目前我們畫面上中間有一個叫做 TextView 的元件 (其實這個元顧名思義就是顯示文字用的)
  • 框內還有一個 ConstraintLayout 我們先不管他

• 三號框 -> 當前選擇的元件，擁有的所有屬性

  • 這個區塊是我們點中間的 TextView 後顯示的，所以右邊顯示的就是所有 TextView 的屬性
  • 屬性：改變這個元件的所有設定
  • 這部分盡量自己去調整每一個屬性試試看會有什麼不同的結果，可以比較快的認識每一個屬性設定

• 四號框 -> 選擇我們製作畫面的介面

按下四號框的中間按紐，會顯示下方的圖示，這個地方就是大部分人製作畫面的地方。【大部分人製作畫面是藉由程式碼，而不是上面一、三號框那個地方】

可以看到目前 TextView 設定的屬性是

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

把 Hello World 換成其他的文字試試看

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World-Two!"  // 這行有更改
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

這時候更改的那行程式碼會有警告 ( 反白的狀態 )，且右邊多了一條黃色的警告標示

這個意思是編譯器告訴你，這個地方他不建議你這樣做，但不影響你執行APP。

我們可以用鼠標指向他，查看問題是什麼

我們先不處理他，這時候再把程式碼改一下，Hello World-Two 我們寫兩行

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World-Two!"  
    android:text="Hello World-Two!"  // 加上這行
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

這時候出現紅色的警告，以及右手邊有紅色的標示

這代表這個地方有嚴重錯誤，不修改的話 APP 是無法正常運作的

今天我們大概了解了製作畫面的地方，以及元件和屬性這兩個詞，也看到了 TextView 這個元件，明天開始我們要做兩件事情。

• 盡可能多了解常用的元件、以及各別擁有的屬性
  • 元件：TextView、ImageView、Button、EditText、ViewPager、RecyclerView、ProgressBar 等等
• 了解佈局這個名詞是什麼
  • 佈局：LinearLayout、RelativeLayout、ConstraintLayout ( 今天有出現 )